<template>
	<view class="flex-col pages" v-if="show">
		<view class="flex-col section_1">
			<view class="flex-col section_2">
				<view class="justify-between group">
					<text class="text" @click="$emit('close')">取消</text>
					<text class="text_1">取消订单</text>
					<text class="text_2" @click="sure">确定</text>
				</view>
				<view class="flex-col group_1">
					<view class="flex-col items-start text-wrapper"><text class="text_3">请选择取消订单原因</text></view>
					<!-- <text class="text_4">不喜欢</text> -->
				</view>
				 <u-radio-group
				    v-model="radiovalue1"
				    placement="column"
				    @change="groupChange"
					iconPlacement="right"
				  >
				    <u-radio
				      :customStyle="{marginBottom: '8px'}"
				      v-for="(item, index) in radiolist1"
				      :key="index"
				      :label="item.name"
				      :name="item.name"
					  size='39'
				   
					  labelSize='16px'
					  iconSize='20px'
				    >
				    </u-radio>
				  </u-radio-group>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props:{
		 show:{
			 type:Boolean,
			 default:function(){
				 return false;
			 }
		 }	
		},
		data() {
			return {
				radiolist1: [{
						name: '不喜欢',
					
					},
					{
						name: '不想买了',
						
					},
					{
						name: '想调换',
					
					}, {
						name: '其他原因',
					
					}],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '不喜欢',
				ordersId:''
			};
		},
		onLoad(option) {
			// console.log(option)
			this.ordersId = option.ordersId
		},

		methods: {
			sure(){
				
			    if(!this.radiovalue1)
				{
					this.$u.toast('请选择取消原因');
					return;
				}
			    this.$emit('confirm',this.radiovalue1);
			},
			groupChange(n) {
				this.radiovalue1=n;
				
			},
		
		},
	};
</script>

<style scoped lang="scss">
	.u-radio-group--column{
		width: 95%;
		margin: 0 auto;
	}
	.u-radio {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
	}

	.group_2 {
		margin-top: 21.5px;
		padding: 0 12px;
	}

	.image {
		margin-top: 5px;
		border-radius: 8px;
		width: 16px;
		height: 16px;
	}

	.text_5 {
		margin-bottom: 2px;
		color: #333333;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.pages {
		
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	     background-color: #00000099;
		 z-index: 99999;
	}
   .section_2 {
		padding: 14rpx 20rpx;
		background-color: #ffffff;
		border-radius: 12px 12px 0px 0px;
		position: fixed;
        left: 0;
		bottom: 0;
		right: 0;
	}

	.group {
		padding-left: 16.5px;
		padding-right: 15.5px;
	}

	.group_1 {
		margin-top: 21.5px;
	}

	.view {
		margin-top: 23.5px;
	}

	.text {
		margin-top: 2px;
		color: #bfbfbf;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.text_1 {
		color: #333333;
		font-size: 18px;
		font-family: '.AppleSystemUIFont';
		line-height: 21.5px;
	}

	.text_2 {
		margin-top: 2px;
		color: #1d6aff;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.text-wrapper {
		padding: 11.5px 0 17px;
		background-color: #f6f7f9;
	}

	.text_4 {
		margin-left: 12px;
		margin-top: 18.5px;
		align-self: flex-start;
		color: #333333;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.text_3 {
		margin-left: 12px;
		color: #666666;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}
</style>
